<template>
  <div class="login" v-loading="loading">
    <transition name="form-fade" mode="in-out">
      <el-form v-show="showLogin" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-box" autocomplete="off">
        <h3 class="login-title">管理系统</h3>
        <el-form-item label="" prop="username">
          <el-input type="text" autocomplete="off" clearable name="username" @keyup.enter.native="submitForm('ruleForm')" placeholder="请输入用户名" v-model="ruleForm.username" prefix-icon="el-icon-user"/>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input @keyup.enter.native="submitForm('ruleForm')" clearable type="password" autocomplete="new-password" placeholder="请输入密码" v-model="ruleForm.password" prefix-icon="el-icon-unlock"/>
        </el-form-item>
        <el-form-item class="forget">
          <el-checkbox v-model="account" @change="rememberAccount">记住密码</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
    </transition>
  </div>
</template>

<script>
import { login } from '@/api/api.js';

export default {
  name: 'login',
  data (){
    return {
      loading: false,
      clickTrue: false,
      ruleForm: {
        username: '',
        password: ''
      },
      account: false,
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, message: '密码长度为6位数', trigger: 'blur' }
        ]
      },
      showLogin: false
    }
  },
  methods:{
    async submitForm(formName) {
      let that = this;
      if(that.clickTrue) return;
      that.clickTrue = true;
      this.loading = true;
      // eslint-disable-next-line no-debugger
      // debugger
      that.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await login({account: that.ruleForm.username, password: that.ruleForm.password});
          that.clickTrue = false;
          that.loading = false;
          if(!res){
            this.loading = false;
            return false;
          }
          that.$message({
            message: res.msg,
            type: 'success'
          });
          // 获取toekn之后，保存在缓存里面
          localStorage.setItem('token', `${res.data}`);
          localStorage.setItem('userName', `${that.ruleForm.username}`);
          that.$router.replace('/views/index');
        }else{
          that.clickTrue = false;
          that.loading = false;
          return false;
        }
      });
    },
    rememberAccount(value) {
      this.account = value;
      if(value === true){
        localStorage.setItem('rememberAccount', 1);
      }else{
        localStorage.setItem('rememberAccount', 0);
        localStorage.removeItem('userName');
      }
    }
  },
  created() {
    // 是否选择记住账号
    this.account = !!((localStorage.getItem('rememberAccount')) * 1) || false;
    if(this.account){
      this.ruleForm.username = localStorage.getItem('userName') || '';
    }
  },
  mounted() {
    this.showLogin = true;
  }
}
</script>
<style lang="scss" scoped>
  .login{
    background: url('~@/assets/img/login/login-bg.jpg') no-repeat center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .login-box{
    width: 335px;
    height: 300px;
    padding: 0 20px 10px 20px;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    font-size: 26px;
    margin-left: -188px;
    margin-top: -180px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    @include sColor(bg, bgFFFFFF);
    .login-title{
      text-align: center;
      margin-top: 15px;
      color: #3D4351;
    }
    .el-input{
      font-size: 15px;
      &.is-active .el-input__inner,/deep/ .el-input__inner:focus,
      .el-checkbox /deep/ .el-checkbox__input.is-focus{
          @include sColor(bor, borFF5274);
      }
    }
    .el-checkbox /deep/ .el-checkbox__input.is-checked + .el-checkbox__label{
      @include sColor(t, tFF5274);
    }
    .el-checkbox{
      /deep/{
        .el-checkbox__input.is-checked .el-checkbox__inner, 
        .el-checkbox__input.is-indeterminate .el-checkbox__inner{
          @include sColor(bg, bgFF5274);
          @include sColor(bor, borFF5274);
        }
        .el-checkbox__input.is-focus .el-checkbox__inner,
        .el-checkbox__inner:hover{
          @include sColor(bor, borFF5274);
        }
      }
    }
    .el-button{
      width: 335px;
      @include sColor(bg, bgFF5274);
    }
    .forget{
      margin:-10px 0 12px;
      .forget-hint{
        float: right;
        @include sColor(t, tFF5274);
        cursor: pointer;
      }
    }
    /deep/ .el-button--warning {
      @include sColor(bg, bgFF5274);
      @include sColor(bor, borFF5274);
    }
}
.form-fade-enter-active, .form-fade-leave-active {
  transition: all 1s;
}
.form-fade-enter, .form-fade-leave-active {
  transform: translate3d(0, -50px, 0);
  opacity: 0;
}
</style>
